<template>
  <div class="stock-login">
    <div>
      <el-form>
        <el-form-item>
          <h2>登录</h2>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="userInfo.user_name"
            placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="userInfo.password"
            placeholder="请输入密码"
            show-password>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="login">
            登录
          </el-button>
          <el-button
            @click="register">
            注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'
import { ROUTE_REGISTER } from '@/router/config'
export default defineComponent({
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
  },
  setup(props, { attrs, slots, emit }) {
    const userInfo = ref({
      user_name: '',
      password: '',
    })
    const login = () => {
      console.log(userInfo.value.user_name)
    }
    const router = useRouter()
    const register = () => {
      router.push(ROUTE_REGISTER.use())
    }
    return {
      userInfo,
      login,
      register,
    }
  }
})
</script>

<style lang="scss" scoped>
  .stock-login {
    max-width: 250px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    padding: 10px 100px;
    box-shadow: var(--shadow);
  }
</style>
